<template>
  <!-- 教务管理-约名师-选外教 -->
  <div class="orderForeignTeacher-selectTeacher">
    <div class="content-foreign-selectTeacher">
      <!-- 顶部班级信息 -->
      <div class="boxborder box-classinfo">
        <div class="row" style="margin-top: 0;border-bottom: 0.01rem solid #ebebeb;height: 0.35rem;">
          <span class="title color3">{{classInfo.className}}</span>
        </div>
        <div class="row" style="display:flex;margin-top:0.42rem;">
          <div style="width:35%;">
            <span>课程名称：</span>
            <span class="color3">{{classInfo.courseName}}</span>
          </div>
          <div style="width:24.5%;">
            <span>支付类型：</span>
            <span class="color3">{{classInfo.payType}}</span>
          </div>
          <!-- <div style="width:24.5%;">
            <span>订单号：</span>
            <span class="color3">ASDC1000</span>
          </div> -->
          <div style="width:16%;">
            <span class="color3">已约{{classInfo.feiboSyllabusOrderNum}}节</span>
            <span>/共{{classInfo.feiboSyllabusNum||(classInfo.syllabusEndNum-classInfo.syllabusStartNum+1)}}节课</span>
          </div>
        </div>
        <div class="row" style="display:flex;margin-top:0.3rem;">
          <div style="width:35%;">
            <span>开始日期：</span>
            <span>{{classInfo.startTime}}</span>
          </div>
          <div  style="width:24.5%;">
            <span>需求节数：</span>
            <span>{{syllabusObj.coursePreview.classlist.length}}</span>
            <!-- <el-input-number v-model="classInfo.needCourseCount" :min="1" :max="10" label="描述文字"></el-input-number> -->
          </div>
          <div style="width:24.5%;">
            <span>老师条件：</span>
            <span>{{classInfo.teacherCountry}}</span>
          </div>
          <!-- <el-select  style="width:2rem;" v-model="classInfo.teacherObj.selectValue" placeholder="老师条件">
             <el-option
                v-for="item in classInfo.teacherObj.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
          </el-select> -->
        </div>
      </div>
      <!-- 排课模块 -->
      <div class="boxborder box-syllabus" v-if="componentsVisible.syllabus">
        <div class="row color3" style="font-size:0.18rem;font-weight:bold;
        margin-top: 0;border-bottom: 0.01rem solid #ebebeb;height: 0.35rem;font-size:0.2rem;">按周排课</div>
        <!-- <div class="row color3" style="font-weight:bold;">设置上课时间点</div>
        <div class="box-setClasstime">
          <div class="box-weekcloumn">
            <span>周一</span>
            <div class="box-tags">
              <el-tag
                :key="index"
                v-for="(tag,index) in syllabusObj.monday.dynamicTags"
                v-model="syllabusObj.monday.dynamicTags[index]"
                closable
                :disable-transitions="false"
                @close="handleTagsClose(tag,syllabusObj.monday.dynamicTags)">
                {{tag}}
              </el-tag>
              <el-select
                class="input-new-tag"
                ref="saveTagInput-monday"
                v-if="syllabusObj.monday.selectVisible"
                v-model="syllabusObj.monday.selectValue"
                placeholder="请选择"
                @change="handleTagsSelectConfirm(syllabusObj.monday)"
                @blur="handleTagsSelectBlur(syllabusObj.monday)"
                :automatic-dropdown="true"
               >
                <el-option
                  v-for="item in syllabusObj.selectOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button v-else class="button-new-tag" size="small" @click="showTagsSelect('saveTagInput-monday',syllabusObj.monday)">+ 时间点</el-button>
            </div>
          </div>
          <div class="box-weekcloumn">
            <span>周二</span>
            <div class="box-tags">
              <el-tag
                :key="index"
                v-for="(tag,index) in syllabusObj.tuesday.dynamicTags"
                v-model="syllabusObj.tuesday.dynamicTags[index]"
                closable
                :disable-transitions="false"
                @close="handleTagsClose(tag,syllabusObj.tuesday.dynamicTags)">
                {{tag}}
              </el-tag>
              <el-select
                class="input-new-tag"
                ref="saveTagInput-tuesday"
                v-if="syllabusObj.tuesday.selectVisible"
                v-model="syllabusObj.tuesday.selectValue"
                placeholder="请选择"
                @change="handleTagsSelectConfirm(syllabusObj.tuesday)"
                @blur="handleTagsSelectBlur(syllabusObj.tuesday)"
                :automatic-dropdown="true"
               >
                <el-option
                  v-for="item in syllabusObj.selectOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button v-else class="button-new-tag" size="small" @click="showTagsSelect('saveTagInput-tuesday',syllabusObj.tuesday)">+ 时间点</el-button>
            </div>
          </div>
          <div class="box-weekcloumn">
            <span>周三</span>
            <div class="box-tags">
              <el-tag
                :key="index"
                v-for="(tag,index) in syllabusObj.wednesday.dynamicTags"
                v-model="syllabusObj.wednesday.dynamicTags[index]"
                closable
                :disable-transitions="false"
                @close="handleTagsClose(tag,syllabusObj.wednesday.dynamicTags)">
                {{tag}}
              </el-tag>
              <el-select
                class="input-new-tag"
                ref="saveTagInput-wednesday"
                v-if="syllabusObj.wednesday.selectVisible"
                v-model="syllabusObj.wednesday.selectValue"
                placeholder="请选择"
                @change="handleTagsSelectConfirm(syllabusObj.wednesday)"
                @blur="handleTagsSelectBlur(syllabusObj.wednesday)"
                :automatic-dropdown="true"
               >
                <el-option
                  v-for="item in syllabusObj.selectOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button v-else class="button-new-tag" size="small" @click="showTagsSelect('saveTagInput-wednesday',syllabusObj.wednesday)">+ 时间点</el-button>
            </div>
          </div>
          <div class="box-weekcloumn">
            <span>周四</span>
            <div class="box-tags">
              <el-tag
                :key="index"
                v-for="(tag,index) in syllabusObj.thursday.dynamicTags"
                v-model="syllabusObj.thursday.dynamicTags[index]"
                closable
                :disable-transitions="false"
                @close="handleTagsClose(tag,syllabusObj.thursday.dynamicTags)">
                {{tag}}
              </el-tag>
              <el-select
                class="input-new-tag"
                ref="saveTagInput-thursday"
                v-if="syllabusObj.thursday.selectVisible"
                v-model="syllabusObj.thursday.selectValue"
                placeholder="请选择"
                @change="handleTagsSelectConfirm(syllabusObj.thursday)"
                @blur="handleTagsSelectBlur(syllabusObj.thursday)"
                :automatic-dropdown="true"
               >
                <el-option
                  v-for="item in syllabusObj.selectOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button v-else class="button-new-tag" size="small" @click="showTagsSelect('saveTagInput-thursday',syllabusObj.thursday)">+ 时间点</el-button>
            </div>
          </div>
          <div class="box-weekcloumn">
            <span>周五</span>
            <div class="box-tags">
              <el-tag
                :key="index"
                v-for="(tag,index) in syllabusObj.firday.dynamicTags"
                v-model="syllabusObj.firday.dynamicTags[index]"
                closable
                :disable-transitions="false"
                @close="handleTagsClose(tag,syllabusObj.firday.dynamicTags)">
                {{tag}}
              </el-tag>
              <el-select
                class="input-new-tag"
                ref="saveTagInput-firday"
                v-if="syllabusObj.firday.selectVisible"
                v-model="syllabusObj.firday.selectValue"
                placeholder="请选择"
                @change="handleTagsSelectConfirm(syllabusObj.firday)"
                @blur="handleTagsSelectBlur(syllabusObj.firday)"
                :automatic-dropdown="true"
               >
                <el-option
                  v-for="item in syllabusObj.selectOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button v-else class="button-new-tag" size="small" @click="showTagsSelect('saveTagInput-firday',syllabusObj.firday)">+ 时间点</el-button>
            </div>
          </div>
          <div class="box-weekcloumn">
            <span>周六</span>
            <div class="box-tags">
              <el-tag
                :key="index"
                v-for="(tag,index) in syllabusObj.saturday.dynamicTags"
                v-model="syllabusObj.saturday.dynamicTags[index]"
                closable
                :disable-transitions="false"
                @close="handleTagsClose(tag,syllabusObj.saturday.dynamicTags)">
                {{tag}}
              </el-tag>
              <el-select
                class="input-new-tag"
                ref="saveTagInput-saturday"
                v-if="syllabusObj.saturday.selectVisible"
                v-model="syllabusObj.saturday.selectValue"
                placeholder="请选择"
                @change="handleTagsSelectConfirm(syllabusObj.saturday)"
                @blur="handleTagsSelectBlur(syllabusObj.saturday)"
                :automatic-dropdown="true"
               >
                <el-option
                  v-for="item in syllabusObj.selectOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button v-else class="button-new-tag" size="small" @click="showTagsSelect('saveTagInput-saturday',syllabusObj.saturday)">+ 时间点</el-button>
            </div>
          </div>
          <div class="box-weekcloumn">
            <span>周日</span>
            <div class="box-tags">
              <el-tag
                :key="index"
                v-for="(tag,index) in syllabusObj.sunday.dynamicTags"
                v-model="syllabusObj.sunday.dynamicTags[index]"
                closable
                :disable-transitions="false"
                @close="handleTagsClose(tag,syllabusObj.sunday.dynamicTags)">
                {{tag}}
              </el-tag>
              <el-select
                class="input-new-tag"
                ref="saveTagInput-sunday"
                v-if="syllabusObj.sunday.selectVisible"
                v-model="syllabusObj.sunday.selectValue"
                placeholder="请选择"
                @change="handleTagsSelectConfirm(syllabusObj.sunday)"
                @blur="handleTagsSelectBlur(syllabusObj.sunday)"
                :automatic-dropdown="true"
               >
                <el-option
                  v-for="item in syllabusObj.selectOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button v-else class="button-new-tag" size="small" @click="showTagsSelect('saveTagInput-sunday',syllabusObj.sunday)">+ 时间点</el-button>
            </div>
          </div>
        </div> -->
        <div class="box-preview">
          <div class="row">
            <span class="color3" style="font-weight:bold;margin-right:0.16rem;">已选时间预览 {{syllabusObj.coursePreview.classlist.length}}节</span>
            <el-button size="mini" @click="resetClassList" type="text"
              style="margin-left:0.24rem;">
              <img src="@/assets/img/education_manage/orderForeignTeacher/reset.png">
              <span>重置</span>
              </el-button>
          </div>
          <div class="box-classlist">
            <el-tag
              :key="index"
              v-for="(tag,index) in syllabusObj.coursePreview.classlist"
              v-model="syllabusObj.coursePreview.classlist[index]"
              closable
              :disable-transitions="false"
              @close="handleTagsClose(tag,syllabusObj.coursePreview.classlist)">
              {{tag.orderBy}} . {{tag.realFeiboStartTime}} | {{getWeekByTimeStr(tag.realFeiboStartTime)}}
            </el-tag>
          </div>
        </div>
        <div class="row" style="margin-top:0.4rem;">
          <el-button class="resetElement" @click="queryTeacherList" type="primary" plain>查询可用老师</el-button>
        </div>
      </div>
      <!-- 查询教师列表模块 -->
      <div class="boxborder box-teacherlist" v-if="componentsVisible.teacherlist">
        <div class="row">
          <span class="color3" style="font-weight:bold;margin-right:0.16rem;font-size:0.2rem;">可用老师查询结果：</span>
          <span style="color:#3885f8;font-size:0.2rem;">提示：一个老师无法满足排课数量？试试点击“优化”，展示优化方案</span>
        </div>
        <div class="row" style="border-bottom: 0.01rem solid #ebebeb;height: 0.46rem;">
          <el-radio-group class="planRadio" v-model="teacherlistObj.planradio" @change="teacherPlanSortChange">
            <el-radio-button label="1">排课最多</el-radio-button>
            <el-radio-button label="2">专属排课最多</el-radio-button>
            <el-radio-button label="3">综合能力优先</el-radio-button>
          </el-radio-group>
        </div>
        <div class="box-planResult color3" style="margin-top:0.2rem;">
          <div class="teacherItem" v-for="(teacher,index) in teacherlistObj.teachers" :key="index">
            <img class="photo" :src="teacher.teacherInfo.avatar" >
            <div class="cloumn-1">
              <div class="row" style="font-weight:bold;">
                <span>{{teacher.teacherInfo.teacherNickName}}</span>&nbsp;
                <span>|</span>&nbsp;
                <span>{{teacher.teacherInfo.teacherType==1?'菲律宾':'欧美'}}</span>
              </div>
              <!-- <div class="row">
                <span>该机构排课：{{teacher.OrgCourseCount}}节</span>
              </div> -->
            </div>
            <div class="cloumn-2">
              <div class="row">
                <span>匹配数：</span>
                <span class="publicclass">公共{{teacher.count-teacher.monopolyCount}}节</span>
                <span class="privacyclass">专属{{teacher.monopolyCount}}节</span>
              </div>
              <!-- <div class="row">
                <span>该学生排课：{{teacher.studentCourseCount}}节</span>
              </div> -->
            </div>
            <div class="splitline"></div>
            <el-button class="btn" type="text" @click="showPreviewResult(3,teacher)">预览</el-button>
            <el-button :disabled="teacher.count>=syllabusObj.coursePreview.classlist.length" class="btn" type="text" @click="showOptimize(teacher)">优化</el-button>
          </div>
        </div>
      </div>
      <!-- 优化结果模块 -->
      <div class="boxborder box-optimize" v-if="componentsVisible.optimize">
        <div class="row" style="margin-bottom:0.1rem;">
          <el-button type="text" @click="backtosyllabus" style="font-size:0.2rem;">
            <img src="@/assets/img/education_manage/orderForeignTeacher/back.png">
            <span>返回重选</span>
          </el-button>
        </div>
        <div class="box-planlist">
          <div class="row" style="margin-bottom:0;">
            <span class="color3" style="font-weight:bold;">优化方案一：组合外教</span>
            <span style="margin-left:0.3rem;color:#3885f8;">匹配到：{{optimizeObj.optimizePlan.count}}节</span>
            <span style="margin-left:0.3rem;color:#ffb81f;">未匹配到：{{optimizeObj.optimizePlan.unCount}}节</span>
            <el-button type="primary" size="mini" @click="showPreviewResult(1)" style="margin-left:0.16rem;">预览</el-button>
          </div>
          <div class="box-plan-teacherlist">
              <div class="teacherItem" v-for="(teacher,index) in optimizeObj.optimizeTeachers" :key="index">
                <img class="photo" :src="teacher.teacherInfo.avatar" >
                <div class="cloumn-1">
                  <div class="row">
                    <span>{{teacher.teacherInfo.teacherNickName}}</span>&nbsp;
                    <span>|</span>&nbsp;
                    <span>{{teacher.teacherInfo.teacherType==1?'菲律宾':'欧美'}}</span>
                  </div>
                  <!-- <div class="row">
                    <span>该机构排课：{{teacher.OrgCourseCount}}节</span>
                  </div> -->
                </div>
                <div class="cloumn-2">
                  <div class="row">
                    <span>匹配数：</span>
                    <span class="publicclass">公共{{teacher.count-teacher.monopolyCount}}节</span>
                    <span class="privacyclass">专属{{teacher.monopolyCount}}节</span>
                  </div>
                  <!-- <div class="row">
                    <span>该学生排课：{{teacher.studentCourseCount}}节</span>
                  </div> -->
                </div>
              </div>
          </div>
        </div>
        <div class="box-planlist">
          <div class="row" style="margin-bottom:0;">
            <span class="color3" style="font-weight:bold;">优化方案二：查看此老师日历，更换未匹配时间</span>
            <span style="margin-left:0.3rem;color:#3885f8;">匹配到：{{optimizeObj.primaryPlan.count}}节</span>
            <span style="margin-left:0.3rem;color:#ffb81f;">未匹配到：{{optimizeObj.primaryPlan.unCount}}节</span>
            <el-button type="primary" size="mini" @click="showPreviewResult(2)" style="margin-left:0.16rem;">预览</el-button>
          </div>
          <div class="box-plan-teacherlist">
              <div class="teacherItem" v-for="(teacher,index) in optimizeObj.primaryTeacher" :key="index">
                <img class="photo" :src="teacher.teacherInfo.avatar" >
                <div class="cloumn-1">
                  <div class="row">
                    <span>{{teacher.teacherInfo.teacherNickName}}</span>&nbsp;
                    <span>|</span>&nbsp;
                    <span>{{teacher.teacherInfo.teacherType==1?'菲律宾':'欧美'}}</span>
                  </div>
                  <!-- <div class="row">
                    <span>该机构排课：{{teacher.OrgCourseCount}}节</span>
                  </div> -->
                </div>
                <div class="cloumn-2">
                  <div class="row">
                    <span>匹配数：</span>
                    <span class="publicclass">公共{{teacher.count-teacher.monopolyCount}}节</span>
                    <span class="privacyclass">专属{{teacher.monopolyCount}}节</span>
                  </div>
                  <!-- <div class="row">
                    <span>该学生排课：{{teacher.studentCourseCount}}节</span>
                  </div> -->
                </div>
              </div>
          </div>
        </div>
      </div>
      <!-- 预览模块 -->
      <div class="boxborder box-previewResult" v-if="componentsVisible.previewResult">
        <div class="row" style="margin-bottom:0.1rem;">
          <!-- <el-button type="text" @click="backtosyllabus"><i class="el-icon-arrow-left"></i>返回重选</el-button> -->
          <el-button type="text" @click="backtosyllabus" style="font-size:0.2rem;">
            <img src="@/assets/img/education_manage/orderForeignTeacher/back.png">
            <span>返回重选</span>
          </el-button>
        </div>
        <div class="box-planlist">
          <div class="row" style="margin-bottom:0;">
            <!-- <span>组合老师查询结果</span>
            <span>匹配到：15节；</span>
            <span>未匹配到：0节；</span>
            <span>红色背景表示未匹配到老师</span> -->
            <span class="color3" style="font-weight:bold;">组合老师查询结果</span>
            <span style="margin-left:0.3rem;color:#3885f8;">匹配到：{{previewObj.matchObj.count}}节</span>
            <span style="margin-left:0.3rem;color:#ffb81f;">未匹配到：{{previewObj.matchObj.unCount}}节；</span>
            <span style="margin-left:0rem;color:#ffb81f;">橙色背景表示未匹配到老师</span>
          </div>
          <div class="box-plan-teacherlist">
              <div class="teacherItem" v-for="(teacher,index) in previewObj.teachers" :key="index">
                <div class="preColor" :style="'background-color: '+teacher.preColor+';'"></div>
                <img class="photo" :src="teacher.teacherInfo.avatar" >
                <div class="cloumn-1">
                <div class="row">
                    <span>{{teacher.teacherInfo.teacherNickName}}</span>&nbsp;
                    <span>|</span>&nbsp;
                    <span>{{teacher.teacherInfo.teacherType==1?'菲律宾':'欧美'}}</span>
                  </div>
                  <!-- <div class="row">
                    <span>该机构排课：{{teacher.OrgCourseCount}}节</span>
                  </div> -->
                </div>
                <div class="cloumn-2">
                  <div class="row">
                    <span>匹配数：</span>
                    <span class="publicclass">公共{{teacher.count-teacher.monopolyCount}}节</span>
                    <span class="privacyclass">专属{{teacher.monopolyCount}}节</span>
                  </div>
                  <!-- <div class="row">
                    <span>该学生排课：{{teacher.studentCourseCount}}节</span>
                  </div> -->
                </div>
              </div>
          </div>
          <div class="box-plan-syllabuslist">
            <div class="syllabusItem"
             v-for="(row,index) in previewObj.syllabusItem"
             :key="index"
             :style="'background-color: '+row.preColor+';'">
              <!-- <span class="index">{{index+1}}.</span> -->
              <span class="time">{{row.orderBy}}.{{row.realFeiboStartTime}}</span>
              <span class="name">{{row.teacherName}}</span>
            </div>
          </div>
          <div class="row" style="margin-top:0.25rem;">
            <el-button class="resetElement" type="primary" @click="showConfirmDialog"
              style="width:1.83rem;">确定排课</el-button>
            <span style="font-size:0.16rem;margin-left:0.1rem;">请尽快确定，以免匹配老师时间被占用</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 再次确认询问弹窗 -->
    <el-dialog class="selectTeacherSuccess"
     :modal="false"
     :visible.sync="selectTeacherSuccessVisible"
     @close="cancel"
     >
      <div class="box-success">
        <div class="row">余额需支付</div>
        <div class="row"><span class="money">￥{{confirmDialog.pay}}</span></div>
        <div class="row">账户余额：￥{{confirmDialog.balance}}</div>
        <div class="row" style="margin-top:0.25rem;">
          <el-button class="resetElement" @click="d=>{this.selectTeacherSuccessVisible=false;}" style="width:1.4rem;">再想想</el-button>
          <el-button class="resetElement" style="margin-left:0.16rem;width:1.4rem;"
           @click="saveOrderTeacher">确定预约</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 预约成功结果反馈弹窗 -->
    <el-dialog class="selectTeacherSuccess"
     :visible.sync="resultdialogVisible"
     @close="cancel"
     :show-close="false"
     :close-on-press-escape="false"
     :close-on-click-modal="false"
     >
      <div class="box-success">
        <div class="row" style="text-align: right;font-size: 0.25rem;margin-top: -0.5rem;    margin-bottom: 0.4rem;">
          <i class="el-icon-close" @click="showOrderForeignSyllabuslist(3)"></i>
        </div>
        <div class="row" style="    margin-bottom: 0.4rem;">
          <span class="money">名师预约成功</span>
        </div>
        <div class="row" style="margin-top:0.25rem;">
          <el-button class="resetElement" @click="showOrderForeignSyllabuslist(1)" style="width:1.4rem;">查询班级订单</el-button>
          <el-button class="resetElement" v-if="classInfo.classOrTrialClass===1" @click="showOrderForeignSyllabuslist(2)" style="margin-left:0.16rem;width:1.4rem;">查看排课列表</el-button>
          <el-button class="resetElement" v-else-if="classInfo.classOrTrialClass===2" @click="showOrderForeignSyllabuslist(3)" style="margin-left:0.16rem;width:1.4rem;">返回试听管理</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { setTimeout } from 'timers';

  let vm;
  export default {
    props:['orderForeignTeacherSelectTeacher'],
    data() {
      return {
        /**控制子模块显示 */
        componentsVisible: {
          syllabus:true,
          teacherlist:false,
          optimize:false,
          previewResult:false
        },
        /**顶部班级信息 */
        classInfo:{
          courseStartTime:'2019-07-05',
          needCourseCount:1,
          teacherCountry:'菲律宾老师',
          // teacherObj:{
          //   selectValue:'',
          //   options: [{
          //       value: '选项1',
          //       label: '黄金糕'
          //     }, {
          //       value: '选项2',
          //       label: '双皮奶'
          //     }, {
          //       value: '选项3',
          //       label: '蚵仔煎'
          //     }, {
          //       value: '选项4',
          //       label: '龙须面'
          //     }, {
          //       value: '选项5',
          //       label: '北京烤鸭'
          //   }],
          // }
        },
        /**排课模块 */
        syllabusObj:{
          // selectOption:[
          //   {
          //     value:'9:00',
          //     label:'9:00'
          //   },
          //   {
          //     value:'12:00',
          //     label:'12:00'
          //   },
          //   {
          //     value:'14:00',
          //     label:'14:00'
          //   },
          // ],
          // monday:{
          //   dynamicTags:['9:00'],
          //   selectVisible:false,
          //   selectValue:''
          // },
          // tuesday:{
          //   dynamicTags:['9:00'],
          //   selectVisible:false,
          //   selectValue:''
          // },
          // wednesday:{
          //   dynamicTags:['9:00'],
          //   selectVisible:false,
          //   selectValue:''
          // },
          // thursday:{
          //   dynamicTags:['9:00'],
          //   selectVisible:false,
          //   selectValue:''
          // },
          // firday:{
          //   dynamicTags:['9:00'],
          //   selectVisible:false,
          //   selectValue:''
          // },
          // saturday:{
          //   dynamicTags:['9:00'],
          //   selectVisible:false,
          //   selectValue:''
          // },
          // sunday:{
          //   dynamicTags:['9:00'],
          //   selectVisible:false,
          //   selectValue:''
          // },
          coursePreview:{
            classlist:[],
            primaryClasslist:[],
          }
        },
        /**教师列表模块 */
        teacherlistObj:{
          planradio:'1',
          teachers:[]
        },
        /**优化模块 */
        optimizeObj:{
          optimizePlan:{
            count:0,
            unCount:0
          },
          primaryPlan:{
            count:0,
            unCount:0
          },
          optimizeTeachers:[],
          primaryTeacher:[]
        },
        /**预览模块 */
        previewObj:{
          matchObj:{
            count:0,
            unCount:0
          },
          teachers:[],
          syllabusItem:[]
        },
        selectTeacherSuccessVisible:false,
        resultdialogVisible:false,
        // orderForeignSyllabuslistPopupVisible:false
        confirmDialog:{
          balance:0,
          pay:0
        },
      };
    },
    methods: {
      /**初始化数据 */
      initBydata(data){
        if(!data)return;
        this.resetPage();
        //班级信息
        let classObj=data.classObj;
        if(classObj)
        {  
          this.classInfo=classObj;
        }
        //排课信息
        let courseObj=data.courseObj;
        if(courseObj){
          this.syllabusObj.coursePreview.primaryClasslist=courseObj;
          this.syllabusObj.coursePreview.classlist=[];
          courseObj.forEach(d=>{
            this.syllabusObj.coursePreview.classlist.push(d);
          });
        }
      },
      /**重置界面 */
      resetPage(){
         this.componentsVisible= {
          syllabus:true,
          teacherlist:false,
          optimize:false,
          previewResult:false
        };
        // this.syllabusObj.coursePreview.classlist=[];
        this.classInfo={};
      },
      getWeekByTimeStr(str){
        if(!str)return '';
        let day=new Date(str.replace(/-/g,'/'));
        // let num = day.getDay();
        let week=['周日','周一','周二','周三','周四','周五','周六'];
        return week[day.getDay()];
      },
      /**确认 */
      confirm(){
        this.$emit('confirm','data');
      },
      /**取消 */
      cancel(){
        // this.$emit('cancel','data');
      },
      showOrderForeignSyllabuslist(d){
        this.resultdialogVisible=false;
        //班级订单
        if(d===1){
          let param={teacher:{visible:false},
          syllabus:{visible:false},
          classorder:{visible:true,data:this.classInfo}};
          this.$emit('showOrderForeignSyllabuslist',param);
        }
        //排课列表
        else if(d===2){
          let param={teacher:{visible:false},
          syllabus:{visible:true,data:this.classInfo},
          classorder:{visible:false}};
          this.$emit('showOrderForeignSyllabuslist',param);
        }
        //试听-返回试听管理
        else if(d===3){
          let param={teacher:{visible:false},
          syllabus:{visible:false},
          classorder:{visible:false}};
          this.$emit('showOrderForeignSyllabuslist',param);
        }
      },

      //标签
      handleTagsClose(tag,dynamicTags) {
        dynamicTags.splice(dynamicTags.indexOf(tag), 1);
        this.componentsVisible.teacherlist=false;
      },
      showTagsSelect(refname,obj) {
        obj.selectVisible = true;
        this.$nextTick(_ => {
          this.$refs[refname].focus();
        });
      },
      handleTagsSelectConfirm(obj) {
        if (obj.selectValue) {
          obj.dynamicTags.push(obj.selectValue);
        }
        obj.selectVisible = false;
        obj.selectValue = '';
      },
      handleTagsSelectBlur(obj){
        setTimeout(d=>{
          obj.selectVisible = false;
        },200);
      },

      /**重置课程 */
      resetClassList(){
        this.syllabusObj.coursePreview.classlist=[];
        this.syllabusObj.coursePreview.primaryClasslist.forEach(e=>{
          this.syllabusObj.coursePreview.classlist.push(e);
        });
        this.componentsVisible.teacherlist=false;
      },
      /**查询可用教师 */
      queryTeacherList(){
        if(this.syllabusObj.coursePreview.classlist.length==0){
          this.$message({
            message: '排课时间段不可为空！',
            type: 'warning'
          });
          return;
        }
        this.componentsVisible.optimize=false;
        this.componentsVisible.previewResult=false;
        // this.componentsVisible.teacherlist=true;
        let param={
          classId:this.classInfo.classId,
          orderBy:this.teacherlistObj.planradio,
          classOrTrialClass:this.classInfo.classOrTrialClass,
        };
        //正常班级
        if(this.classInfo.classOrTrialClass===1){
          param['classSyllabusEntityList']=this.syllabusObj.coursePreview.classlist;
        }
        //试听班级
        else if(this.classInfo.classOrTrialClass===2){
          param['trialClassSyllabusEntityList']=this.syllabusObj.coursePreview.classlist;
        }
        api.getfeiboAvailableTeacher(param).then(function(d){
          // console.log(d)
          if(d.result=='操作成功'){
            if(!d.list){
              vm.$message({
                message: '可用老师为空！',
                type: 'warning'
              });
              vm.componentsVisible.teacherlist=false;
              return;
            }
            vm.componentsVisible.teacherlist=true;
            vm.teacherlistObj.teachers=d.list;
          }
        });
      },
      /**切换教师排序 */
      teacherPlanSortChange(d){
        this.queryTeacherList();
      },
      /**显示预览结果 */
      showPreviewResult(type,indata=null){
        this.componentsVisible.teacherlist=false;
        this.componentsVisible.syllabus=false;
        this.componentsVisible.optimize=false;
        this.componentsVisible.previewResult=true;
        let colorlist=['#cdedff','#cff6df'];
        //方案1：优化结果
        if(type===1){
          let teachers=this.optimizeObj.optimizeTeachers;
          let courselist=[];
          teachers.forEach((d,index)=>{
            let preColor;
            if(index<2){
              preColor=colorlist[index];
            }
            else{
              let r = Math.floor( Math.random() * 256 );
              let g = Math.floor( Math.random() * 256 );    
              let b = Math.floor( Math.random() * 256 );
              let a = (Math.random()).toFixed(2);
              preColor= "rgba("+r+','+g+','+b+","+a+")";
            }
            d.preColor=preColor;
            let syllabus= d.classSyllabusEntityList||d.trialClassSyllabusEntityList;
            syllabus.forEach(d2=>{
              d2.teacherName=d.teacherInfo.teacherNickName;
              d2.preColor=preColor;
            });
            courselist=courselist.concat(syllabus);
          });
          this.previewObj.teachers=teachers;
          this.previewObj.syllabusItem=courselist;
          this.previewObj.matchObj=this.optimizeObj.optimizePlan;
        }
        //方案2：未优化
        else if(type===2){
          let teachers=this.optimizeObj.primaryTeacher;
          let courselist=[];
          teachers.forEach((d,index)=>{
            let preColor;
            if(index<2){
              preColor=colorlist[index];
            }
            else{
              let r = Math.floor( Math.random() * 256 );
              let g = Math.floor( Math.random() * 256 );    
              let b = Math.floor( Math.random() * 256 );
              let a = (Math.random()).toFixed(2);
              preColor= "rgba("+r+','+g+','+b+","+a+")";
            }
            d.preColor=preColor;

            let syllabus= d.classSyllabusEntityList||d.trialClassSyllabusEntityList;
            syllabus.forEach(d2=>{
              d2.teacherName=d.teacherInfo.teacherNickName;
              d2.preColor=preColor;
            });
            courselist=courselist.concat(syllabus);
          });
          this.previewObj.teachers=teachers;

          let uncourselist=[];
          this.syllabusObj.coursePreview.classlist.forEach(d=>{
            if(!courselist.find(d2=>{return d.classSyllabusId==d2.classSyllabusId})){
              d.preColor='rgb(255, 184, 31)';
              uncourselist.push(d);
            }
          });
          this.previewObj.syllabusItem=courselist.concat(uncourselist);
          this.previewObj.matchObj=this.optimizeObj.primaryPlan;
        }
        //未点击优化按钮，直接预览
        else if(type==3){
          let teachers=[indata];
          let courselist=[];
          teachers.forEach((d,index)=>{
            let preColor;
            if(index<2){
              preColor=colorlist[index];
            }
            else{
              let r = Math.floor( Math.random() * 256 );
              let g = Math.floor( Math.random() * 256 );    
              let b = Math.floor( Math.random() * 256 );
              let a = (Math.random()).toFixed(2);
              preColor= "rgba("+r+','+g+','+b+","+a+")";
            }
            d.preColor=preColor;

            let syllabus= d.classSyllabusEntityList||d.trialClassSyllabusEntityList;
            syllabus.forEach(d2=>{
              d2.teacherName=d.teacherInfo.teacherNickName;
              d2.preColor=preColor;
            });
            courselist=courselist.concat(syllabus);
          });
          this.previewObj.teachers=teachers;

          let uncourselist=[];
          this.syllabusObj.coursePreview.classlist.forEach(d=>{
            if(!courselist.find(d2=>{return d.classSyllabusId==d2.classSyllabusId})){
              d.preColor='rgb(255, 184, 31)';
              uncourselist.push(d);
            }
          });
          this.previewObj.syllabusItem=courselist.concat(uncourselist);

          //匹配结果
          this.previewObj.matchObj={
            count:courselist.length,
            unCount:uncourselist.length
          }
        }
      },
      getRandomColor(){

      },
      /**显示优化结果 */
      showOptimize(teacher){
        // console.log(teacher);
        this.componentsVisible.teacherlist=false;
        this.componentsVisible.syllabus=false;
        this.componentsVisible.previewResult=false;
        this.componentsVisible.optimize=true;
        let param={
          classId:this.classInfo.classId,
          orderBy:this.teacherlistObj.planradio,
          classOrTrialClass:this.classInfo.classOrTrialClass,
        };
        //正常班级
        if(this.classInfo.classOrTrialClass===1){
          let courselist=[];
          this.syllabusObj.coursePreview.classlist.forEach(d=>{
            if(!teacher.classSyllabusEntityList.find(d2=>{return d.classSyllabusId==d2.classSyllabusId})){
              courselist.push(d);
            }
          });
          param['classSyllabusEntityList']=courselist;
        }
        //试听班级
        else if(this.classInfo.classOrTrialClass===2){
          let courselist=[];
          this.syllabusObj.coursePreview.classlist.forEach(d=>{
            if(!teacher.trialClassSyllabusEntityList.find(d2=>{return d.classSyllabusId==d2.classSyllabusId})){
              courselist.push(d);
            }
          });
          param['trialClassSyllabusEntityList']=courselist;
        }
        api.getfeiboAvailableTeacherCombined(param).then(function(d){
          // console.log(d);
          if(d.result=='操作成功'){
            let optimizeList=d.list;
            if(!optimizeList){
              vm.$message({
                message: '优化方案为空！',
                type: 'warning'
              });
              // vm.componentsVisible.optimize=false;
              // return;
              optimizeList=[];
            }
            vm.componentsVisible.optimize=true;
            optimizeList.unshift(teacher);
            let optimizePlan={count:0,unCount:0},primaryPlan={count:0,unCount:0};
            let optimizeTeachers=optimizeList,primaryTeacher=[teacher];
            //方案1
            optimizeList.forEach(d=>{
              optimizePlan.count=optimizePlan.count+d.count;
            });
            optimizePlan.unCount=vm.syllabusObj.coursePreview.classlist.length-optimizePlan.count;
            optimizePlan.unCount=optimizePlan.unCount<0?0:optimizePlan.unCount;
            //方案二
            primaryTeacher.forEach(d=>{
              primaryPlan.count=primaryPlan.count+d.count;
            });
            primaryPlan.unCount=vm.syllabusObj.coursePreview.classlist.length-primaryPlan.count;
            primaryPlan.unCount=primaryPlan.unCount<0?0:primaryPlan.unCount;

            vm.optimizeObj={
              optimizePlan:optimizePlan,
              primaryPlan:primaryPlan,
              optimizeTeachers:optimizeTeachers,
              primaryTeacher:primaryTeacher
            };
          }
        });
      },
      /**返回重选 */
      backtosyllabus(){
        this.componentsVisible.teacherlist=false;
        this.componentsVisible.optimize=false;
        this.componentsVisible.previewResult=false;
        this.componentsVisible.syllabus=true;
      },
      /**显示确认弹窗 */
      showConfirmDialog(){
        //需支付金额
        let money=0;
        let price={
          1:this.classInfo.filipinoTeacherPrice,//菲律宾老师单价
          2:this.classInfo.westernTeacherPrice//欧美老师单价
        };
        this.previewObj.teachers.forEach(d=>{
          let course=d.classSyllabusEntityList||d.trialClassSyllabusEntityList;
          let unitprice=price[d.teacherInfo.teacherType]||0;
          money=money+course.length*unitprice;
        });
        this.confirmDialog.pay=parseFloat(money.toFixed(2));
        //校区余额
        api.campusInfo({campusId:this.$store.state.campusId}).then(function(d){
          // console.log(d)
          if(d.result=='操作成功'){
            vm.confirmDialog.balance=d.campus.accountMoney||0;
          }
        });

        this.selectTeacherSuccessVisible=true;
      },
      /**确认约名师 */
      saveOrderTeacher(){
        if(this.confirmDialog.pay>this.confirmDialog.balance){
          this.$message({
            message: '账户余额不足！',
            type: 'warning'
          });
          return;
        }
        let param={
          classId:this.classInfo.classId,
          campusId:this.$store.state.campusId,
          classOrTrialClass:this.classInfo.classOrTrialClass,
          syllabusTeacherInfoList:[],
				  _wait:'',
        };
        this.previewObj.teachers.forEach(d=>{
          let row={
            teacherId:d.teacherInfo.teacherId,
            teacherNickName:d.teacherInfo.teacherNickName,
            teacherType:d.teacherInfo.teacherType,
            gender:d.teacherInfo.gender,
            nationality:d.teacherInfo.nationality,
            classSyllabusEntityList:d.classSyllabusEntityList,
            trialClassSyllabusEntityList:d.trialClassSyllabusEntityList
          };
          param.syllabusTeacherInfoList.push(row);
        });
        api.savefeiboSyllabusTeacher(param).then(function(d){
          // console.log(d);
          if(d.resultCode==2000){
            vm.selectTeacherSuccessVisible=false;
            vm.resultdialogVisible=true;
          }
          else{
            vm.$message({
              message: d.message||'操作失败！',
              type: 'warning'
            });
          }
        });
      },
    },
    mounted() {},
    computed: {},
    watch: {},
    created: function() {vm=this;}
  };
</script>

<style lang="scss">
.orderForeignTeacher-selectTeacher {
  width: 100%;
  .content-foreign-selectTeacher {
    padding: 0 0.04rem 0.2rem 0.04rem;
		font-size: 0.18rem;
    display: flex;
    flex-wrap: wrap;
    color: #666666;
    .color3{
      color: #333333;
    }
    .color6{
      color: #666666;
    }
    .boxborder{
      width: 100%;
      padding: 0.16rem 0.3rem;
      margin-bottom: 0.12rem;
      background: #fff;
      border: 0.01rem solid #dcdfe6;
      border-radius: 0.1rem;
      -webkit-box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
      box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
    }
    .row{
      width: 100%;
      margin-bottom: 0.12rem;
    }
    .title{
      font-size: 0.2rem;
      font-weight: bold;
    }
    .el-tag{
      font-size: 0.16rem !important;
    }
    .el-button{
      font-size: 0.16rem !important;
    }
    .box-classinfo{
      height: 2.22rem;
    }
    .box-syllabus{
      min-height: 3rem;
      .box-setClasstime{
        display: flex;
        border-bottom: 0.01rem solid #ebebeb;
        padding-bottom: 0.33rem;
        .box-weekcloumn{
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0 0.1rem;
          .box-tags{
            display: flex;
            flex-direction: column;
            width: 1.4rem;
            .el-tag{
              text-align: center;
              margin-top: 0.08rem;
            }
            .button-new-tag{
              margin-top: 0.08rem;
            }
            .input-new-tag{
              width: 100%;
            }
          }
        }
      }
      .box-preview{
        margin-top: 0.16rem;
        .box-classlist{
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          .el-tag{
            width: 2.8rem !important;
            height: 0.36rem !important;
            line-height: 0.36rem !important;
            margin-bottom: 0.1rem !important;
            margin-right: 0.1rem !important;
            background-color: rgb(248,248,250) !important;
            color: #333333 !important;
            font-size: 0.18rem !important;
            border: 0 !important;
          }
        }
      }
    }
    .box-teacherlist{
      min-height: 3rem;
      .box-planResult{
        display: flex;
        flex-wrap: wrap;
      }
      .planRadio{
        height: 0.47rem;
        .el-radio-button{
          background: transparent !important;
          height: 0.47rem !important;
          .el-radio-button__inner{
            border: 0 !important;
            background: transparent !important;
            color: #666666 !important;
            font-size: 0.2rem !important;
            box-shadow:none !important;
            height: 0.44rem !important;
          }
        }
        .el-radio-button.is-active{
          background: transparent !important;
          height: 0.47rem !important;
          .el-radio-button__inner{
            border: 0 !important;
            background: transparent !important;
            color: #333333 !important;
            font-size: 0.2rem !important;
            height: 0.44rem !important;
            font-weight: bold !important;
            border-bottom: 0.03rem solid rgb(59,131,249) !important;
            box-shadow:none !important;
          }
        }

      }
    }
    .box-optimize{
      .box-planlist{
        margin-bottom: 0.6rem;
      }
      .box-plan-teacherlist{
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.25rem;
      }
    }
    .box-previewResult{
      .box-planlist{

      }
      .box-plan-teacherlist{
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0.25rem;
        // width: 14.2rem;
      }
      .box-plan-syllabuslist{
        display: flex;
        flex-wrap: wrap;
        // width: 14.2rem;
        .syllabusItem{
          display: flex;
          justify-content: space-between;
          width: 3.5rem;
          height: 0.4rem;
          line-height: 0.4rem;
          border-radius: 0.1rem;
          padding: 0 0.1rem;
          margin: 0 0.1rem 0.1rem 0;
          background-color: rgba(255, 174, 0,0.5);
          .index{

          }
          .time{

          }
          .name{

          }
        }
      }
    }
    .box-teacherlist,.box-optimize,.box-previewResult{
      .teacherItem{
        width: 7.3rem;
        height: 0.8rem;
        display: flex;
        align-items: center;
        margin: 0.1rem 0.1rem 0 0;
        background: #f8f8f9;
        // border: 0.01rem solid #dcdfe6;
        border-radius: 0.1rem;
        // -webkit-box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
        // box-shadow: 0 0.02rem 0.38rem 0 #3885f81f, 0 0 0.06rem 0 #3885f81f;
        overflow: hidden;
        .preColor{
          height: 100%;
          width: 0.1rem;
          background-color: rgba(255, 174, 0,0.5);
        }
        .photo{
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 0.5rem;
          margin: 0 0.1rem;
        }
        .cloumn-1{
          margin: 0 0.1rem;
          width: 1.8rem;
          .row{
            display: flex;
            // justify-content: space-between;
            margin: 0;
            line-height: 0.25rem;
          }
        }
        .cloumn-2{
          margin: 0 0.1rem 0 0.3rem;
          width: 2.5rem;
          .row{
            display: flex;
            justify-content: space-between;
            margin: 0;
            line-height: 0.25rem;
          }
          .publicclass{
            color: #2faa33;
            font-weight: bold;
          }
          .privacyclass{
            color: #ff7901;
            font-weight: bold;
          }
        }
        .splitline{
          margin: 0 0.12rem;
          width: 0.01rem;
          height: 80%;
          background-color: #3885f81f;
        }
        .btn{
          color: #3885F8;
          padding: 0.05rem;
          font-size: 0.16rem;
        }
      }
    }

  }
  .selectTeacherSuccess{
    
    .box-success{
      .el-icon-close:hover{
        cursor: pointer;
        color: #3885F8;
      }
      .row{
        width: 100%;
        text-align: center;
        margin: 0.1rem 0;
        .money{
          font-size: 0.35rem;
          font-weight: bold;
        }
      }
    }
    .el-dialog {
      width: 5rem;
      // min-height: 100%;
      margin-top: 38vh !important;
      .el-dialog__header {
        
      }
      .el-dialog__body{
        font-size: 0.16rem !important;
      }
      .el-dialog__title {
        font-size: 0.25rem;
        font-weight: bold;
        color: #333333;
      }
      .el-dialog__headerbtn {
        font-size: 0.25rem !important;
      }
    }
  }
}

</style>